<template>
	<public-view :navType="'myvideo' + (live_center_data.is_me?'2':'1') " topBgShow="5" v-if="live_center_data.id">
		<view class="content flex f-d-c a-i-c" >
			<view class="user-center flex  a-i-c">
				<view class="avatar">
					<image class="img" :src="live_center_data.avatar" mode=""></image>
				</view>
				<view class="user-info-view">
					<view class="name color-fff f-w-b f-s-32 l-h-44">
						{{live_center_data.nickname ||""}}
					</view>
					<view class="user-id f-s-24 l-h-34" style="color: rgba(255, 255, 255, 0.44);">
						用户ID：{{live_center_data.no ||"00000000"}}
					</view>
				</view>
			</view>
			<view class="video-box">
				<view class="top-like-look-num flex j-c-e f-s-26 l-h-36">
					<view class="item">
						<text class="f-w-b">{{live_center_data.praise_count || 0}}</text>点赞
					</view>
					<view class="item" @click="goTo({url:'/pages/live/fans/index?type=fans&user_id=' + user_id})">
						<text class="f-w-b">{{live_center_data.fans_count || 0}}</text>粉丝
					</view>
					<view class="item" @click="goTo({url:'/pages/live/fans/index?type=follow&user_id=' + user_id})">
						<text class="f-w-b">{{live_center_data.follow_count || 0}}</text>关注
					</view>
				</view>
				<bottom-btn :positon="false" @click.stop="follow" btnIndex="4" v-if="!live_center_data.is_me && !live_center_data.is_follow">关注</bottom-btn>
				<view class="video-tab">
					<view class="flex w-100 tab-box">
						<block v-for="(item, index) in tab_list" :key="index">
							<view class="item all-center" @click="changeTab(item)">
								{{item.name}}
								<view class="line" :class="tab_id === item.id?'active':'unactive'"></view>
							</view>
						</block>
					</view>
				</view>
				<view class="video-list-box flex j-c-b f-w-w">
					<block v-for="(item, index) in video_list" :key="index">
						<view class="item f-s-24" :style="{backgroundImage:`url(${item.image})`}">
							<view class="like like-active" v-if="tab_id === '2'">
								<image class="image" src="@/static/images/live/like-active.svg" mode=""></image>
								<!-- <image class="image" src="@/static/images/live/un-like.svg" mode=""></image> -->
							</view>
							<view class="like like-active" v-if="tab_id === '3'">
								<image class="image" src="@/static/images/live/star-active.svg" mode=""></image>
								<!-- <image class="image" src="@/static/images/live/un-star.svg" mode=""></image> -->
							</view>
							<view class="look-like-box flex j-c-b">
								<view class="flex a-i-c">
									<image class="icon" src="@/static/images/live/video-look-icon.svg" mode=""></image>
									{{ item.views }}
								</view>
								<view class="flex a-i-c">
									<image class="icon" src="@/static/images/live/video-like-icon.svg" mode=""></image>
									{{ item.likes }}
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</public-view>
</template>

<script>
import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import {
		mapGetters
	} from "vuex"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				page:1,
				user_id:0,
				tab_id:'1',
				tab_list:[
					{
						id:'1',
						name:"作品"
					},
					{
						id:'2',
						name:"喜欢"
					},
					{
						id:'3',
						name:"收藏"
					}
				],
				video_list:[],
				live_center_data:{
					
				}
			};
		},
		computed: {
			...mapGetters(["userInfo"])
		},
		onLoad(options) {
			let that = this
			if (options.user_id || uni.getStorageSync("userInfo").id) {
				that.user_id = options.user_id || uni.getStorageSync("userInfo").id
			} else {
				uni.navigateBack({
					complete:() => {
						uni.showToast({
							title:"用户不存在",
							icon:"none"
						})
					}
				})
			}
		},
		onShow(){
			let that = this
			that.getUserLiveCenter()
			that.getVideosByUserId()
		},
		onReachBottom() {
			this.page++
			this.getVideosByUserId()
		},
		methods:{
			goTo,
			getVideosByUserId(){
				let that = this
				this.util.postRequest({
					url:"v1/find/list_by_user",
					data: {
						view_user_id:that.user_id,
						rows:10,
						page:that.page,
						type:that.tab_id
					}
				}).then(res => {
					if(that.page === 1){
						that.video_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.video_list = that.video_list.concat(res.data.data)
						}else{
							// that.page--
						}
					}
				})
			},
			follow() {
				let that = this
				that.util.getRequest({
					url:"v1/user/follow",
					data:{
						follow_user_id:that.user_id
					}
				}).then(res => {
					uni.showToast({
						icon:'none',
						title: res.msg
					})
					that.getUserLiveCenter()
				}).catch(err => {
					uni.showToast({
						icon:'none',
						title: err.msg
					})
				})
			},
			changeTab(item){
				this.video_list = []
				this.tab_id = item.id
				this.page = 1
				this.getVideosByUserId()
			},
			// TODO: W
			getUserLiveCenter(){
				// 直播短视频个人中心
				let that = this
				that.util.getRequest({
					url:"v1/user/find_index",
					data:{
						view_user_id:that.user_id
					}
				}).then(res=>{
					console.log(res,"直播短视频个人中心")
					let data = res.data
					that.live_center_data = data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.video-box {
		width: 100%;
		background: #FFFFFF;
		border-radius: 32upx 32upx 0 0;
		padding-top: 22upx;
		.video-list-box{
			width: 100%;
			padding: 0 32upx;
			.item{
				position: relative;
				width: 328upx;
				height: 328upx;
				background: #000;
				border-radius: 12upx;
				margin-bottom: 32upx;
				background-size: cover;
				.like{
					width: 64upx;
					height: 64upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					position: absolute;
					top: 24upx;
					right: 16rpx;
					.image{
						width: 40upx;
						height: 40upx;
					}
				}
				.look-like-box{
					position: absolute;
					bottom: 20upx;
					width: 100%;
					color: #FFFFFF;
					padding: 0 14upx;
					.icon{
						width: 30upx;
						height: 30upx;
						margin-right: 6upx;
					}
				}
			}
		}
		.video-tab {
			width: 100%;
			.tab-box{
				margin-bottom: 32upx;
				.item {
					width: 33.33333%;
					height: 110upx;
					position: relative;
					.line {
						position: absolute;
						width: 100%;
						height: 6upx;
						background-image: linear-gradient(to right, #FBB10B 0%, #FB3A0B 100%);
						bottom: 0;
						pointer-events: none;
						transition: all 0.2s ease-out;
						z-index: 1;
					}
					.active{
						opacity: 1;
					}
					.unactive{
						opacity: 0;
					}
				}
			}
		}

		.top-like-look-num {
			width: 100%;
			padding: 0 46upx;
			margin-bottom: 28upx;
			position: relative;
			z-index: 3;
			.item {
				margin-left: 40upx;

				text {
					margin-right: 8upx;
				}
			}
		}
	}

	.user-center {
		width: 100%;
		padding: 0 28upx;
		transform: translateY(46rpx);
		.user-info-view {
			.name {
				margin-bottom: 12upx;
			}
		}

		.avatar {
			width: 188upx;
			height: 188upx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 30upx;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		width: 750upx;
		min-height: 100vh;
		padding-top: 20upx;
	}
</style>